<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jd.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.circliful {
				position: relative;
			}
			
			.circle-text,
			.circle-info,
			.circle-text-half,
			.circle-info-half {
				width: 100%;
				position: absolute;
				text-align: center;
				display: inline-block;
			}
			
			.circle-info,
			.circle-info-half {
				color: #999;
			}
			
			.circliful .fa {
				margin: -10px 3px 0 3px;
				position: relative;
				bottom: 4px;
			}
			
			#Mask {
				position: absolute;
				top: 0px;
				filter: alpha(opacity=60);
				background-color: #333;
				z-index: 1002;
				left: 0px;
				opacity: 0.5;
				-moz-opacity: 0.5;
			}
			
			#Progress {
				position: absolute;
				top: 35%;
				left: 35%;
				z-index: 2000;
			}
			
			#Progress .circle-info {
				color: black;
			}
		</style>
	</head>

	<body>

		<!-- Mask是遮罩，Progress是进度条 -->
		<div>
			<div id="Mask"></div>
			<div id="Progress" data-dimension="250" data-text="0%" data-info="导出进度" data-width="30" data-fontsize="38" data-percent="0" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>
		</div>
	</body>
<script type="text/javascript">
	 //显示进度条
    var isFirstExport=true;
    function showProgress(){
        $("#Mask").css("height",$(document).height());
        $("#Mask").css("width",$(document).width());
        $("#Mask").show();
        if(isFirstExport){
            $("#Progress").circliful();
        }else{
            $("#Progress .circle-text").text("10%");
            $("#Progress .circle-info").text("导出进度");
            $("#Progress").show();
        }
    }  
    //隐藏进度条
    function hideProgress(){
        $("#Mask").hide();
        $("#Progress").hide();
    }
    function onZipAll() {
        //这里开始下载文件
        var formData=$("#form_id").serialize();
        location.href="${root}/record/v_seal_excel_all.do?"+formData;
         //Ajax刷新进度条
         showProgress();
         window.setTimeout(function(){
            var timer=window.setInterval(function(){
              $.ajax({
                 type:'post',
                  dataType:'json', 
                  url: "${root}/record/flushProgress.do",
                  success: function(data) {
                      $("#Progress .circle-text").text(data.percentText);
                      if(data.curCount===undefined||data.totalCount===undefined){
                          $("#Progress .circle-info").text("导出进度");
                      }
                      else{
                           $("#Progress .circle-info").text("导出进度:"+data.curCount+"/"+data.totalCount);
                      }
                      if(data.percent=="100"){
                          window.clearInterval(timer);
                          hideProgress();
                      }
                  },
                  error:function(data){}
               });
            },200);
         },200);
         isFirstExport=false;
    }
</script>
</html>